import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CustomSliverHeaderDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        shrinkWrap: false,
        slivers: <Widget>[
          SliverPersistentHeader(
              pinned: true,
              delegate: SliverCustomHeaderDelegate(
                  title: '哪吒之魔童降世',
                  collapsedHeight: 50,
                  expandedHeight: 250,
                  paddingTop: MediaQuery.of(context).padding.top,
                  coverImgUrl: 'https://img.zcool.cn/community/01c6615d3ae047a8012187f447cfef.jpg@1280w_1l_2o_100sh.jpg'
              )
          ),
          SliverPadding(
              padding: EdgeInsets.all(10),
              sliver: SliverToBoxAdapter(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    ClipRRect(
                      borderRadius: BorderRadius.circular(6),
                      child: Image.network(
                        'https://img1.gamersky.com/image2019/07/20190725_ll_red_136_2/gamersky_07small_14_201972510258D0.jpg',
                        width: 130,
                        height: 180,
                        fit: BoxFit.cover,
                      ),
                    ),
                    SizedBox(
                      width: 15,
                    ),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          MovieDetails(top: 0,title: "哪吒之魔童降世",fontSize: 18,color: Color(0xFF333333),fontWeight: FontWeight.bold,),
                          MovieDetails(top: 2,type:'别名',title: "哪吒降世;Ne Zha",fontSize: 14,color: Color(0xFF999999)),
                          MovieDetails(top: 2,type:'地区',title: "中国大陆",fontSize: 14,color: Color(0xFF999999)),
                          MovieDetails(top: 2,type:'主演',title: "吕艳婷/囧森瑟夫",fontSize: 14,color: Color(0xFF999999)),
                          MovieDetails(top: 2,type:'类型',title: "剧情/喜剧/动画/奇幻",fontSize: 14,color: Color(0xFF999999)),
                          MovieDetails(top: 2,type:'片长',title: "110分钟",fontSize: 14,color: Color(0xFF999999)),
                          MovieDetails(top: 2,type:'导演',title: "饺子",fontSize: 14,color: Color(0xFF999999)),
                          MovieDetails(top: 2,type:'上映',title: "2019-7-26",fontSize: 14,color: Color(0xFF999999)),
                        ],
                      ),
                    )
                  ],
                ),
              ),
          ),
          SliverPadding(
            padding: EdgeInsets.only(left: 10,right: 10),
            sliver: SliverToBoxAdapter(
              child:  Divider(),
            ),
          ),
          SliverPadding(
            padding: EdgeInsets.only(left: 10,right: 10),
            sliver: SliverToBoxAdapter(
              child:  Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text('剧情简介',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Color(0xFF333333),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 5,bottom: 5),
                    child: Text(
                      '天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。太乙受命将灵珠托生于陈塘关李靖家的儿子哪吒身上。然而阴差阳错，灵珠和魔丸竟然被掉包。本应是灵珠英雄的哪吒却成了混世大魔王。调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。然而面对众人对魔丸的误解和即将来临的天雷的降临，哪吒是否命中注定会立地成魔？他将何去何从？',
                      textAlign: TextAlign.justify,
                      style: TextStyle(
                        fontSize: 15,
                        color: Color(0xFF999999),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
          SliverList(delegate: SliverChildBuilderDelegate((BuildContext context, int index){
            return Container(
              margin: EdgeInsets.only(top: 10),
              decoration: BoxDecoration(
                color: Colors.black38,
                borderRadius: BorderRadius.circular(5)
              ),
              alignment: Alignment.center,
              child: Text('HELLO $index',style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold
              ),),
            );
          },
            childCount: 50
          ))
        ],
      ),
    );
  }
}

class MovieDetails extends StatelessWidget {

  final String title;
  final double fontSize;
  final double top;
  final String type;
  final Color color;
  final FontWeight fontWeight;

  MovieDetails({Key key,this.fontSize,this.title,this.type='',this.color,this.top,this.fontWeight}):super(key:key);

  @override
  Widget build(BuildContext context) {
    return Padding(padding: EdgeInsets.only(top: top),child: Text(
      type.isNotEmpty?'$type: $title':'$title',
      style: TextStyle(
        fontSize: fontSize,
        color: color,
        fontWeight: fontWeight,
      ),
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
    ));
  }
}


class SliverCustomHeaderDelegate extends SliverPersistentHeaderDelegate {
  final double collapsedHeight;
  final double expandedHeight;
  final double paddingTop;
  final String coverImgUrl;
  final String title;

  SliverCustomHeaderDelegate({
    this.collapsedHeight,
    this.expandedHeight,
    this.paddingTop,
    this.coverImgUrl,
    this.title,
  });

  @override
  double get minExtent => this.collapsedHeight + this.paddingTop;

  @override
  double get maxExtent => this.expandedHeight;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }

  Color makeStickyHeaderBgColor(shrinkOffset) {
    final int alpha = (shrinkOffset / (this.maxExtent - this.minExtent) * 255).clamp(0, 255).toInt();
    return Color.fromARGB(alpha,255,82,82);
  }

  Color makeStickyHeaderTextColor(shrinkOffset, isIcon) {
    if(shrinkOffset <= 50) {
      return isIcon ? Colors.white : Colors.transparent;
    } else {
      final int alpha = (shrinkOffset / (this.maxExtent - this.minExtent) * 255).clamp(0, 255).toInt();
      return Color.fromARGB(alpha, 255, 255, 255);
    }
  }

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      alignment: Alignment.center,
      height: this.maxExtent,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          // 背景图
          Container(child: Image.network(this.coverImgUrl, fit: BoxFit.cover)),
          // 收起头部
          Positioned(
            left: 0,
            right: 0,
            top: 0,
            child: Container(
              color: this.makeStickyHeaderBgColor(shrinkOffset),    // 背景颜色
              child: SafeArea(
                bottom: false,
                child: Container(
                  height: this.collapsedHeight,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      IconButton(
                        icon: Icon(
                          Icons.arrow_back_ios,
                          color: this.makeStickyHeaderTextColor(shrinkOffset, true),    // 返回图标颜色
                        ),
                        onPressed: () {},
                      ),
                      Text(
                        this.title,
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.w500,
                          color: this.makeStickyHeaderTextColor(shrinkOffset, false),   // 标题颜色
                        ),
                      ),
                      IconButton(
                        icon: Icon(
                          Icons.share,
                          color: this.makeStickyHeaderTextColor(shrinkOffset, true),    // 分享图标颜色
                        ),
                        onPressed: () {},
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}